<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mission15</title>
</head>
<body>
	<ul id="source">
		<li>北京空气质量:<b>90</b></li>
		<li>上海空气质量:<b>70</b></li>
		<li>天津空气质量:<b>80</b></li>
		<li>广州空气质量:<b>50</b></li>
		<li>深圳空气质量:<b>40</b></li>
		<li>福州空气质量:<b>32</b></li>
		<li>成都空气质量:<b>100</b></li>
	</ul>
	<ul id="resort">
	</ul>
	<button id="sort-btn">排序</button>
</body>
<script type="text/javascript">
	/**
	 * 获取页面值
	 * @returns {Array}
	 */
	function getData() {
		var data = [];
		var ul = document.getElementById("source");
		for (var i = 0; i < ul.childElementCount; i++) {
			//获得当前的li
			var li = ul.children[i];
			//获取标签中的文本，然后截取内容，将截取后的字符串返回给strCity,
			//split按照参数中给定的字符进行截取，返回的为一个字符串数组
			var strCity = li.innerHTML.split("空气质量:")[0];
			var num = Number(li.children[0].innerText);
			data.push([strCity,num]);//推入数组
		}
		return data;
	}
	/**
	 * 对值进行排序
	 * @param data
	 * @returns {*}
	 */
	function sortAqiDate(data) {
		data.sort(function (d1, d2) {
			return d2[1] - d1[1];
		});
		return data;
	}
	/**
	 * 将排序后的值插入页面
	 * @param data
	 */
	function render(data) {
		var contentStr = "";
		for(var i=0;i < data.length;i++){
			contentStr +="<li>第" + (i+1) + "名:" + data[i][0] + "空气质量：" + data[i][1] +"</li>";
		}
		document.getElementById("sort-btn").innerHTML = contentStr;
	}


	/**
	 * 按钮处理函数
	 */
	function btnHandle() {
		var aqiData = getData();
		aqiData = sortAqiDate(aqiData);
		render(aqiData);
	}
	/**
	 * 初始化函数，获取按钮doms
	 */
	function init() {
		document.getElementById("sort-btn").onmousedown = btnHandle;
	}
	init();
</script>
</html>